<template>
  <div class="internal">
    <div class="head border-bottom">
      <div class="head-return" @click="$router.back()">&lt;</div>
      <span class="head-tou">消息详情</span>
    </div>
    <div class="chat-container">
      <div class="chat-content" ref="chatContent">
        <div v-for="(msg, index) in messages" :key="index" :class="{ 'my-msg': msg.isMe }">
          <div class="msg-time">{{ msg.time }}</div>
          <div class="chatdoc">
            <img src="https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u154.png" alt=""
              v-if="!msg.isMe" />
            <img :src="img" alt="" v-else-if="msg.isMe" />
            <!-- <div class="user-name">{{ msg.name }}：</div> -->
            <div class="msg-body">
              {{ msg.body }}
              <br />
            </div>
          </div>
          <a href="/" v-if="msg.link" class="back">———— 点此返回首页 ————</a>
        </div>
      </div>
      <div class="input-box">
        <img
          src="https://cdn7.axureshop.com/demo/1763441/images/%E5%9C%A8%E7%BA%BF%E5%92%A8%E8%AF%A2-%E5%92%A8%E8%AF%A2%E4%B8%AD/u3358.png"
          alt="" @click="errorAciton" />
        <input type="text" placeholder="请输入消息" v-model="newMsgBody" @keyup.enter="sendMessage" />
        <button @click="sendMessage">发送</button>
        <img
          src="https://cdn7.axureshop.com/demo/1763441/images/%E5%9C%A8%E7%BA%BF%E5%92%A8%E8%AF%A2-%E5%92%A8%E8%AF%A2%E4%B8%AD/u3356.svg"
          alt="" @click="errorAciton" />
        <img
          src="https://cdn7.axureshop.com/demo/1763441/images/%E5%9C%A8%E7%BA%BF%E5%92%A8%E8%AF%A2-%E5%92%A8%E8%AF%A2%E4%B8%AD/u3357.svg"
          alt="" class="add" @click="errorAciton" />
      </div>
    </div>
  </div>
</template>

<script>
import { getinfo } from "../../../api/getinfo";
import { Toast } from "vant";
export default {
  data() {
    return {
      img: "",
      messages: [
        {
          name: "我",
          body: "病症描述：最近1个星期，不咳嗽，但是总感觉嗓子有痰，咳不出来，用药情况：无，无药物过敏史",
          time: "2023-05-28 12:24",
          isMe: true,
        },

        {
          name: "杨爱明医生",
          body: "您好，最近测量过体温吗？",
          time: "2023-05-28 12:30",
          isMe: false,
        },
        {
          name: "我",
          body: "刚测量过，37.2",
          time: "2023-05-28 12:38",
          isMe: true,
        },
      ],
      newMsgBody: "",
    };
  },
  created() {
    //获取用户信息
    getinfo().then((res) => {
      console.log(res);
      this.img = res.data.datas.img;
    });
  },
  methods: {
    errorAciton() {
      Toast("此功能暂未实现");
    },
    sendMessage() {
      const msg = {
        name: "我",
        body: this.newMsgBody,
        time: new Date().toLocaleString(),
        isMe: true,
      };
      if (this.newMsgBody.length == 0) {
        Toast("发送消息不能为空");
        return;
      }
      this.messages.push(msg);
      const msg1 = {
        name: "杨爱明医生",
        body: "此情况请前往首页进行建档预约挂号，可以为您提供有关怎样诊断、治疗及预防疾病等信息。",
        link: true,
        time: new Date().toLocaleString(),
        isMe: false,
      };
      setTimeout(() => {
        this.messages.push(msg1);
        this.$nextTick(() => {
          const contentEl = this.$refs.chatContent;
          contentEl.scrollTop = contentEl.scrollHeight;
        });
      }, 500); //
      // 滚动到底部
      this.$nextTick(() => {
        const contentEl = this.$refs.chatContent;
        contentEl.scrollTop = contentEl.scrollHeight;
      });

      this.newMsgBody = "";
    },
  },
};
</script>
<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

::v-deep .my-msg {
  .msg-time {
    display: flex;
    flex-direction: row-reverse;
  }

  .chatdoc {
    flex-direction: row-reverse;

    img {
      width: vw(30);
      height: vw(30);
      border-radius: 50%;
      margin-right: vw(5);
      margin-left: vw(0) !important;
    }

    .msg-body {
      background: #2ec7c9 !important;
      min-width: vw(20) !important;
      max-width: vw(250) !important;
      border-radius: vw(10) !important;
      line-height: vw(30) !important;
      padding: vw(10) !important;
      margin-right: vw(5);
      color: #fff;
    }
  }
}

.chat-container {
  overflow: auto;
  padding-top: vw(50);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: vw(65);

  .msg-time {
    padding: vw(5) vw(40);
    color: #8e8e8e;
    font-size: vw(14);
  }

  .back {
    display: flex;
    justify-content: center;
    font-size: vw(18);
    color: #2ec7c9;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    padding: vw(10);
  }

  .chat-content {
    overflow-y: scroll;
    padding-bottom: vw(120);

    .chatdoc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: vw(10);

      img {
        width: vw(30);
        margin-left: vw(5);
      }

      .msg-body {
        background: #fff;
        min-width: vw(50);
        max-width: vw(250);
        margin-left: vw(5);
        border-radius: vw(10);
        line-height: vw(30);
        padding: vw(10);
      }
    }
  }

  .input-box {
    width: 100%;
    height: vw(60);
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
      width: vw(250);
      height: vw(35);
      margin: vw(0) vw(10);
    }

    img {
      width: vw(30);
    }

    .add {
      width: vw(25);
      height: vw(25);
      margin-left: vw(5);
    }

    button {
      position: absolute;
      right: vw(80);
      border: none;
      background: #2ec7c9;
      width: vw(60);
      height: vw(30);
      border-radius: vw(20);
      color: #fff;
    }
  }
}
</style>
